<template>
  <Card title="排行" v-bind="$attrs">
    <template #extra>
      <div style="display: flex; justify-items: center">
        <Tabs v-model:activeKey="activeKey" @change="tabChange">
          <a-tab-pane key="1" tab="按打卡排行"></a-tab-pane>
          <a-tab-pane key="2" tab="总积分排行"></a-tab-pane>
          <a-tab-pane key="3" tab="读书积分排行"></a-tab-pane>
        </Tabs>

        <!--        v-model:value="value"-->
        <Calendar
          style="margin-left: 15px; width: 100%"
          :fullscreen="false"
          @panelChange="onPanelChange"
          valueFormat="YYYY-MM"
        />
      </div>
    </template>

    <List item-layout="horizontal" :data-source="dataList" :pagination="pagination">
      <template #renderItem="{ item, index }">
        <ListItem @click="goCard(item)">
          <ListItemMeta>
            <!--            <template #description>-->
            <!--              <span v-html="item.data"> </span>-->
            <!--            </template>-->
            <!--            <template #title> {{ item.name }} </template>-->
            <template #avatar>
              <!--              <Icon :icon="item.avatar" :size="30" />-->
              <div class="Personnel-list" style="display: flex; align-items: center">
                <div style="width: 30px">{{ (page - 1) * 10 + (index + 1) }}</div>

                <div
                  class="cu-avatar lg bg-blue radius"
                  style="
                    margin-left: 10px;
                    margin-right: 10px;
                    border-radius: 14rpx;
                    width: 80rpx;
                    height: 80rpx;
                    position: relative;
                  "
                >
                  <span class="avatar-text">{{
                    item.userName.slice(item.userName.length - 2, item.userName.length)
                  }}</span>
                </div>
              </div>
            </template>
          </ListItemMeta>
          <div style="width: 100%; display: flex">
            <div style="width: 200px; cursor: pointer">{{ item.userName }}</div>
            <div style="color: gray">{{ item.num }}</div>
          </div>
        </ListItem>
      </template>
    </List>
  </Card>
</template>

<script lang="ts" setup>
  import { Card, List, Tabs, Calendar } from 'ant-design-vue';
  //  import { dynamicInfoItems } from './data';
  import util from '@/utils/util';
  import Icon from '@/components/Icon/Icon.vue';
  // import { sysRankingListApi } from '@/api/sys/sysData';

  import { ref, onMounted } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useGo } from '@/hooks/web/usePage';
  const { createMessage } = useMessage();

  const ListItem = List.Item;
  const ListItemMeta = List.Item.Meta;

  const activeKey = ref('1');
  const dateStr = ref('');
  const dataList = ref([]);
  const dateType = ref('month');
  const go = useGo();
  const onSelect = (value) => {
    //  console.log(value);
  };

  function onPanelChange(value, mode) {
    // console.log(value,mode);
    // console.log("--activeKey:",activeKey.value)
    dateType.value = mode;
    let text = '';
    if (mode == 'year') {
      let arr = value.split('-');
      text = arr[0];
    } else {
      text = value;
    }
    dateStr.value = text;
    searchFn();
  }

  const page = ref(1);
  const pageSize = ref(10);
  const totalResult = ref(0);

  function searchFn() {
    page.value = 1;
    tableListFn();
  }

  function goCard(item) {
    if (activeKey.value == 1) {
      go({
        path: `/book/userCardList`,
        query: { userName: item.userName, dateStr: dateStr.value },
      });
    } else {
    }
  }

  function tableListFn() {
    let data = {
      rankingType: activeKey.value,
      dateStr: dateStr.value,
      dateType: dateType.value,
      page: page.value,
      pageSize: pageSize.value,
    };
    // sysRankingListApi(data).then((res) => {
    //   if (res.code == 200) {
    //     dataList.value = res.data.list;
    //     //   console.log("---dataList.value:",dataList.value)
    //     totalResult.value = res.data.totalResult;
    //     pagination.value.total = res.data.totalResult;
    //   } else {
    //     createMessage.error(res.message);
    //   }
    // });
  }

  const pagination = ref({
    onChange: (p: number, pz: number) => {
      // console.log("---p:",p);
      // console.log("---pz:",pz)
      page.value = p;
      pageSize.value = pz;
      pagination.value.pageSize = pz;
      tableListFn();
    },
    total: totalResult.value,
    pageSize: pageSize.value,
  });

  function tabChange(e) {
    // console.log("--tabChange:",activeKey.value)
    searchFn();
  }

  onMounted(() => {
    let m = util.times('ym');
    dateStr.value = m;
    searchFn();
  });
</script>
<style lang="less">
  .ant-card-head {
    .ant-card-extra {
      width: 100%;
    }
    .ant-picker-panel {
      display: none;
    }
  }

  .ant-card-body {
    .ant-list-item-meta-avatar {
      margin-inline-end: unset !important;
    }
  }

  @color0: #ffffff; // Appears 2 times
  @color1: #f1f1f1; // Appears 2 times

  .Personnel-list {
    .cu-avatar {
      align-items: center;
      background-color: #cccccc;
      background-position: center;
      background-size: cover;
      color: #ffffff;
      display: inline-flex;
      font-size: 1.5em;
      font-variant: small-caps;
      height: 64upx;
      justify-content: center;
      margin-left: 3px;
      margin-right: 4px;
      margin: 0;
      padding: 0;
      position: relative;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      width: 64upx;
      .avatar-text {
        font-size: 0.4em;
      }
    }
    .bg-blue {
      background-color: #0081ff;
      color: #ffffff;
    }
    .cu-avatar.sm {
      font-size: 1em;
      height: 48upx;
      width: 48upx;
    }
    .cu-avatar.lg {
      flex-shrink: 0;
      font-size: 2em;
      height: 45px !important;
      width: 45px !important;
    }
    .cu-avatar.xl {
      font-size: 2.5em;
      height: 128upx;
      width: 128upx;
    }
    .radius {
      border-radius: 50%;
    }
    .cu-avatar-group {
      direction: rtl;
      display: inline-block;
      padding: 0 10upx 0 40upx;
      unicode-bidi: bidi-override;
      .cu-avatar {
        border: 4upx solid @color1;
        margin-left: -30upx;
        vertical-align: middle;
      }
      .cu-avatar.sm {
        border: 1upx solid @color1;
        margin-left: -20upx;
      }
    }
  }
</style>
